<template>
	<view class="date-content">
		<u-toast ref="uToast"></u-toast>
		<view class="date-item">
			<u-form labelPosition="left" :model="model" ref="uForm">
				<u-form-item labelWidth="75" @click="showType = true">
					<template slot="label">
						<label style="display: flex;
						flex-direction: row;
						align-items: center;
						color: #bcbfcc;
						font-size: 15px;
						margin-right: 12px">计算类型</label>
					</template>
					<u-input v-model="dateType" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
					</u-input>
					<u-icon slot="right" name="arrow-right">
					</u-icon>
				</u-form-item>
				<view class="line" v-if="dateType == '天数计算'"></view>
				<u-form-item v-if="dateType == '天数计算'" labelWidth="75" @click="showBgn = true">
					<template slot="label">
						<label style="display: flex;
						flex-direction: row;
						align-items: center;
						color: #bcbfcc;
						font-size: 15px;
						margin-right: 12px">开始时间</label>
					</template>
					<u-input v-model="model.dateInfo.bgnTime" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none">
					</u-input>
					<u-icon slot="right" name="arrow-right">
					</u-icon>
				</u-form-item>
				<view class="line" v-if="dateType == '天数计算'"></view>
				<u-form-item v-if="dateType == '天数计算'" labelWidth="75" @click="showEnd = true">
					<template slot="label">
						<label style="display: flex;
						flex-direction: row;
						align-items: center;
						color: #bcbfcc;
						font-size: 15px;
						margin-right: 12px">结束时间</label>
					</template>
					<u-input v-model="model.dateInfo.endTime" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none">
					</u-input>
					<u-icon slot="right" name="arrow-right">
					</u-icon>
				</u-form-item>
				<view class="line" v-if="dateType == '日期计算'"></view>
				<u-form-item v-if="dateType == '日期计算'" :minDate="model.dateInfo.singleTime" labelWidth="75"
					@click="showTime = true">
					<template slot="label">
						<label style="display: flex;
						flex-direction: row;
						align-items: center;
						color: #bcbfcc;
						font-size: 15px;
						margin-right: 12px">开始时间</label>
					</template>
					<u-input v-model="model.dateInfo.singleTime" disabled disabledColor="#ffffff" placeholder="请选择"
						border="none">
					</u-input>
					<u-icon slot="right" name="arrow-right">
					</u-icon>
				</u-form-item>
				<view class="line" v-if="dateType == '日期计算'"></view>
				<u-form-item v-if="dateType == '日期计算'" labelWidth="75">
					<template slot="label">
						<label style="display: flex;
						flex-direction: row;
						align-items: center;
						color: #bcbfcc;
						font-size: 15px;
						margin-right: 12px">间隔天数</label>
					</template>
					<u-input v-model="model.dateInfo.dayNum" placeholder="请输入" border="none">
					</u-input>
				</u-form-item>
				<view class="line"></view>
			</u-form>
			<u-action-sheet :show="showType" :actions="actions" title="请选择计算类型" @close="showType = false"
				@select="typeSelect">
			</u-action-sheet>
			<u-datetime-picker :show="showBgn" confirmColor="#1C5AD2" v-model="bgnVal" @close="showBgn = false"
				@cancel="showBgn = false" @confirm="confirmBgn" mode="date">
			</u-datetime-picker>
			<u-datetime-picker :show="showEnd" confirmColor="#1C5AD2" v-model="endVal" @close="showEnd = false"
				@cancel="showEnd = false" @confirm="confirmEnd" mode="date">
			</u-datetime-picker>
			<u-datetime-picker :show="showTime" confirmColor="#1C5AD2" v-model="singleVal" @close="showTime = false"
				@cancel="showTime = false" @confirm="confirmSingle" mode="date">
			</u-datetime-picker>
		</view>
		<view class="cal-result">
			<view>计算结果:</view>
			<text class="text r-flex" v-if="dayResult !== null && dateType == '天数计算'">{{ dayResult }}天</text>
			<text class="text r-flex" v-if="dateResult !== null && dateType == '日期计算'">{{ dateResult }}</text>
		</view>
		<view class="cal-btn r-flex">
			<u-button @click="reset()" class="btn-l" shape="circle">重置</u-button>
			<u-button @click="calculate()" shape="circle" color="#1C5AD2">计算</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showType: false,
				dateType: '天数计算',
				model: {
					dateInfo: {
						bgnTime: '',
						endTime: '',
						singleTime: '',
						dayNum: ''
					},
				},
				bgnVal: Number(new Date()),
				endVal: Number(new Date()),
				actions: [{
						name: '天数计算',
					},
					{
						name: '日期计算',
					}
				],
				showBgn: false,
				showEnd: false,
				showTime: false,
				singleVal: Number(new Date()),
				dayResult: null,
				dateResult: null,
			}
		},
		methods: {
			typeSelect(e) {
				this.dateType = e.name;
			},
			// 天数计算
			confirmBgn(e) {
				this.model.dateInfo.bgnTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showBgn = false;
			},
			confirmEnd(e) {
				this.model.dateInfo.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showEnd = false;
			},
			// 日期计算
			confirmSingle(e) {
				this.model.dateInfo.singleTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showTime = false;
			},
			// 重置
			reset() {
				this.model.dateInfo = {};
				this.dateResult = null;
				this.dayResult = null;
			},
			// 计算
			calculate() {
				const that = this;
				const {
					bgnTime,
					endTime,
					singleTime,
					dayNum
				} = this.model.dateInfo;
				if (this.dateType == '天数计算') {
					if (bgnTime == '' || endTime == '') {
						return this.$refs.uToast.show({
							message: '请选择时间',
							type: 'default',
						})
					}
					const start = new Date(bgnTime);
					const end = new Date(endTime);
					const timeDiff = Math.abs(end.getTime() - start.getTime());
					const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
					this.dayResult = days;
				}
				// 转化为数字Number(dayNum)
				if (this.dateType == '日期计算') {
					if (singleTime == '') {
						return this.$refs.uToast.show({
							message: '请选择时间',
							type: 'default',
						})
					}
					if (dayNum == '') {
						return this.$refs.uToast.show({
							message: '请输入天数',
							type: 'default',
						})
					}
					const inputDate = new Date(singleTime);
					this.dateResult = this.addDaysToDate(inputDate, Number(dayNum));
				}
			},
			addDaysToDate(date, days) {
				const result = new Date(date);
				result.setDate(result.getDate() + days);
				return result.toISOString().split('T')[0];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-item {
		background-color: #fff;
		margin-top: 24rpx;
	}

	.line {
		height: 24rpx;
		background-color: #f7f6fa;
		border-top: solid 1px #e5e5e5;
	}

	.cal-result {
		margin-top: 24rpx;
		padding: 0 12px;
		font-size: 36rpx;
		color: #bcbfcc;

		.text {
			padding-top: 2rpx;
			color: #1C5AD2;
		}
	}

	.cal-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 30rpx;
		padding-bottom: 30rpx;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
	}

	.cal-btn /deep/ .u-button {
		width: 45%;
		height: 72rpx !important;
		margin-left: 24rpx;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
	}

	.cal-btn /deep/ .u-button:first-child {
		width: 35%;
		box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);
		color: #a9aba8;
	}

	.date-item /deep/ .u-form-item {
		padding: 0 24rpx;
	}
</style>